<template>
  <div class="driver">

    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
            <template>
              <div class="back">
                <!-- <nav><span @click="$router.back()"><i class="el-icon-arrow-left" /></span>返回 <div data-v-fadabbee="" class="el-divider el-divider--vertical" /> <span style="font-weight: 700;">司机详情</span></nav> -->
                <el-page-header content="司机详情" @back="$router.back()" />
              </div>
            </template>
          </div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="box">
          <!-- <el-row class="driverRow">
        <el-button type="text" @click="showEssential = true">基本信息</el-button>
        <el-button type="text" @click="showEssential = false">驾驶证信息</el-button>
        <hr>
      </el-row> -->
          <el-menu style="padding-left: 40px;" active-text-color="black" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">基本信息</el-menu-item>
            <el-menu-item index="2">驾驶证信息</el-menu-item>
          </el-menu>
          <div class="line" />
          <!-- 基本信息 -->
          <div v-if="showEssential" class="essential">
            <!-- 编辑状态 -->
            <el-row v-if="isShowEdit">
              <el-form :inline="true" class="demo-form-inline" :model="driverInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="员工编号:">
                      <el-input v-model="driverInfo.userId" :disabled="true" style="border: none;" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="司机名称:">
                      <el-input v-model="driverInfo.name" :disabled="true" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="所属机构:">
                      <el-input v-model="driverInfo.agency.name" :disabled="true" />
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="电话:">
                      <el-input v-model="driverInfo.mobile" :disabled="true" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="年龄基本:">
                      <el-input v-model="driverInfo.age" />
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
            </el-row>
            <!-- 查看状态 -->
            <el-row v-else>
              <el-form :inline="true" class="demo-form-inline" :model="driverInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="员工编号:">
                      <!-- <el-input v-model="driverInfo.userId" :disabled="true" style="border: none;" /> -->
                      <span>{{ driverInfo.userId }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="司机名称:">
                      <!-- <el-input v-model="driverInfo.name" :disabled="true" /> -->
                      <span>{{ driverInfo.name }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="所属机构:">
                      <!-- <el-input v-model="driverInfo.agency.name" :disabled="true" /> -->
                      <span>{{ driverInfo.agency.name }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="电话:">
                      <!-- <el-input v-model="driverInfo.mobile" :disabled="true" /> -->
                      <span>{{ driverInfo.mobile }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="年龄:">
                      <!-- <el-input v-model="driverInfo.age" /> -->
                      <span>{{ driverInfo.age }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
            </el-row>
          </div>
          <!-- 驾驶证信息 -->
          <div v-else class="essential">
            <!-- 编辑状态 -->
            <el-row v-if="isShowEdit">
              <el-form :inline="true" class="demo-form-inline" :model="driverLicenseInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证号:">
                      <el-input v-model="driverLicenseInfo.licenseNumber" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="准驾车型:">
                      <el-input v-model="driverLicenseInfo.allowableType" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="初次申领日期:">

                      <el-date-picker
                        v-model="driverLicenseInfo.initialCertificateDate"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      />
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证有效期限:">
                      <el-input v-model="driverLicenseInfo.validPeriod" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾龄:">
                      <el-input v-model="driverLicenseInfo.driverAge" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证类型:">
                      <el-input v-model="driverLicenseInfo.licenseType" />
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="从业资格证:">
                      <el-input v-model="driverLicenseInfo.qualificationCertificate" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="入场证信息:">
                      <el-input v-model="driverLicenseInfo.passCertificate" />
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      :auto-upload="true"
                      action=""
                      list-type="picture-card"
                      :limit="2"
                      :file-list="fileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-exceed="upImgLimit"
                    >
                      <!-- :on-success="handleAvatarSuccess" -->
                      <i class="el-icon-plus" />
                    </el-upload>
                  </div>
                  <p style="color: #bac5dc; font-size: 12px;">
                    注：图片不限大小不限格式,建议上传400*400尺寸的图片,最多上传2张
                  </p>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div></el-col>

              </el-row>
            </el-row>
            <!-- 查看状态 -->
            <el-row v-else>
              <el-form :inline="true" class="demo-form-inline" :model="driverLicenseInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证号:">
                      <!-- <el-input v-model="driverLicenseInfo.licenseNumber" /> -->
                      <span> {{ driverLicenseInfo.licenseNumber }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="准驾车型:">
                      <span> {{ driverLicenseInfo.allowableType }}</span>                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="初次申领日期:">
                      <span> {{ driverLicenseInfo.initialCertificateDate }}</span>                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证有效期限:">
                      <span> {{ driverLicenseInfo.validPeriod }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾龄:">
                      <span> {{ driverLicenseInfo.driverAge }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="驾驶证类型:">
                      <span> {{ driverLicenseInfo.licenseType }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="从业资格证:">
                      <span> {{ driverLicenseInfo.qualificationCertificate }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="入场证信息:">
                      <span> {{ driverLicenseInfo.passCertificate }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      :auto-upload="true"
                      action=""
                      list-type="picture-card"
                      :limit="2"
                      :file-list="fileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :disabled="true"
                    >
                      <!-- :on-success="handleAvatarSuccess" -->
                      <!-- <i class="el-icon-plus" /> -->
                    </el-upload>
                  </div>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div></el-col>

              </el-row>
            </el-row>
          </div>

        </div>

      </el-main>
      <el-footer>
        <el-row v-if="isShowEdit">
          <el-button type="primary" @click="btnSave">保存</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-row>
        <el-row v-else>
          <el-button type="primary" @click="isShowEdit=true">编辑</el-button>
        </el-row>
      </el-footer>

    </el-container>
    <!-- 头 -->

  </div>
</template>

<script>
import {
  getDriverInfo,
  getDriverLicenseInfo,
  editDriverInfo,
  editDriverLicenseInfo,
  imageUpload
} from '@/api/cart'
export default {
  components: {},
  props: [],
  data() {
    return {
      fileList: [], // 驾驶证图片回显列表
      driverLicensePicture: [], // 司机驾驶证信息图片url存储
      driverLicensePictureObj: {}, // 司机驾驶证信息图片对象
      dialogVisible: false,
      dialogImageUrl: '',

      disabled: false,
      activeIndex: '1', // 页面切换依据
      key: '1', // 辨别是哪个模块  返回值
      showEssential: true, // 控制显示 隐藏基本信息 驾驶证信息
      isShowEdit: false, // 控制是否为编辑状态
      driverInfo: {
      }, // 司机基本信息
      driverLicenseInfo: [], // 司机驾驶证信息
      driverInfoBackup: {}, // 司机信息备份数据
      driverLicenseInfoBackup: [], // 司机驾驶证信息备份数据
      driverInfoId: null // 储存获取的id
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getDriverInfo()
    this.getDriverLicenseInfo()
  },
  mounted() {

  },
  updated() {

  },
  destroyed() {

  },
  activated() {

  },
  methods: {

    async uploadImg(file) {
      this.driverLicensePictureObj = {}
      const formData = new FormData()
      formData.append('file', file.file)
      // console.log(formData)
      const result = await imageUpload(formData)
      // console.log(result)
      this.driverLicensePictureObj.uid = file.file.uid
      this.driverLicensePictureObj.status = 'success'
      this.driverLicensePictureObj.url = result
      this.fileList.push(this.driverLicensePictureObj)
      // console.log(this.driverLicensePicture)
    },
    // 点击删除图片
    handleRemove(file, fileList) {
      const index = this.fileList.findIndex(item => {
        return item.uid === file.uid
      })
      console.log(index)
      this.fileList.splice(index, 1)
      // console.log(this.driverLicensePicture)
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      // console.log(file)
      this.dialogImageUrl = file.url
    },
    // 上传数量限制
    upImgLimit() {
      this.$message.error('最多上传两张图片')
    },
    // 基本信息
    async getDriverInfo() {
      // this.showEssential = true
      this.driverInfoId = this.$route.query.id
      // console.log(this.driverInfoId)
      const result = await getDriverInfo(this.driverInfoId)
      console.log(result)
      this.driverInfo = result
      this.driverInfoBackup = JSON.parse(JSON.stringify(result)) // 使用深拷贝备份数据
    },
    // 驾驶证信息
    async getDriverLicenseInfo() {
      // this.showEssential = false
      this.driverInfoId = this.$route.query.id
      // console.log(this.driverInfoId)
      const result = await getDriverLicenseInfo(this.driverInfoId)
      // console.log(result)
      this.driverLicenseInfo = result
      this.driverLicenseInfoBackup = JSON.parse(JSON.stringify(result)) // 使用深拷贝备份数据
      if (result.picture) {
        this.driverLicensePicture = result.picture.split(',')
        this.fileList = result.picture.split(',')
        this.fileList = this.fileList.map((item) => {
          const obj = {}
          obj.url = item
          return obj
        })
        // console.log(this.fileList)
      }
    },
    // 点击上方导航做的事情  判断是哪个模块
    handleSelect(key, keyPath) {
      // console.log(key, keyPath)
      this.key = key
      if (key === '1') {
        this.showEssential = true
        // 点击上方切换 调用取消事件
        this.btnCancel()
      } if (key === '2') {
        this.showEssential = false
        // 点击上方切换 调用取消事件
        this.btnCancel()
      }
    },
    // 点击保存
    async btnSave() {
      if (this.key === '1') {
        this.driverInfo.userId = this.driverInfoId
        await editDriverInfo(this.driverInfo)
        this.getDriverInfo()
        this.isShowEdit = false
        this.$message.success('保存成功')
      } if (this.key === '2') {
        this.driverInfo.userId = this.driverInfoId
        this.driverLicenseInfo.picture = this.fileList.map(item => item.url).join(',')
        // console.log(this.driverLicensePicture)
        await editDriverLicenseInfo(this.driverLicenseInfo)
        this.getDriverLicenseInfo()
        this.isShowEdit = false
        this.$message.success('驾驶证信息保存成功')
      }

      // this.getDriverInfo()
    },
    // 点击取消
    btnCancel() {
      if (this.key === '1') {
        this.driverInfo = this.driverInfoBackup
        // 虽使用深浅拷贝替换原有数据但是只生效一次  所以还是需要从新渲染一次
        this.getDriverInfo()
      } if (this.key === '2') {
        this.driverLicenseInfo = this.driverLicenseInfoBackup
        this.getDriverLicenseInfo()
      }
      this.isShowEdit = false
    }
  }
}
</script>
<style lang='scss' scoped>
.bg-purple-dark{
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
  padding-left: 20px;
}
.driverRow{
  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #fff;
  margin-bottom: 20px;
}
.el-button{
  height: 50px;
  margin-right: 30px;
  color:black;
}
.essential{
  padding-left:60px;
  padding-top: 20px;
}
.box{
  background-color: #fff;
  height: 500px;
}
.el-header, .el-footer {
    background-color: #fff;
    // color: #333;
    text-align: center;
    line-height: 60px;
  }

</style>
